<template>
    <!-- pages/myfavorite/index.wxml -->
    <view :style="'padding-bottom:' + (marginBottom + 20) + 'rpx;'">
        <!-- <view class="search">
    <van-icon name="search" size="18" class="seaicon" />
    <view class="weui-cell weui-cell_input">
      <input class="weui-input" placeholder="搜索美发师、门店、服务名称" />
    </view>
  </view> -->
        <van-tabs nav-class="nav-class" custom-class="custom-class" :active="active" @change="onChange" title-active-color="#333333" title-inactive-color="#999999" sticky>
            <van-tab title="门店">
                <view class="shopbox" @tap="toShopdetails" :data-item="item" v-for="(item, index) in shoplist" :key="index">
                    <view class="shopleft">
                        <view>
                            <image class="shopimg" mode="aspectFill" :src="item.picture"></image>
                        </view>
                        <view>
                            <view class="names">
                                <text>{{ item.storeName }}</text>
                            </view>
                            <view class="score centers mt-20">
                                <image class="clip" :src="item.score < 5 ? imgUrl + 'clip1.png' : imgUrl + 'clip2.png'"></image>
                                <text>{{ item.score }}</text>
                                <view>| 总接单{{ item.orderNumber }}</view>
                            </view>
                            <view class="site">
                                <text>地址：</text>
                                <text>{{ item.location }}</text>
                            </view>
                        </view>
                    </view>

                    <view class="shopright">
                        <view class="map centers" @tap.stop.prevent="seeMap" :data-item="item">
                            <text v-if="item.distance < 1000">{{ item.distance }}m</text>
                            <text v-if="item.distance >= 1000">{{ item.newdistance }}km</text>
                            <van-icon name="location-o" />
                        </view>
                        <view class="deletesite" :data-id="item.storeId" @tap.stop.prevent="onDeletesite" data-type="0">取消收藏</view>
                    </view>
                </view>
                <view class="details-box" v-if="shoplist.length == 0 || !shoplist">
                    <image class="details-page" :src="imgUrl + 'shop-defaultpage.png'"></image>
                    <view class="details-text">暂无门店收藏</view>
                </view>
            </van-tab>
            <van-tab title="美发师">
                <view class="hairstylist" @tap="toHairstylistdetails" :data-item="item" v-for="(item, index) in hairlist" :key="index">
                    <view class="lastleft">
                        <view>
                            <image class="headerimg" mode="aspectFill" :src="item.headportrait"></image>
                        </view>
                        <view>
                            <view class="names centers">
                                <text>{{ item.nickname }}</text>
                                <text class="job3">{{ item.position }}</text>
                            </view>
                            <view class="score centers mt-20">
                                <image class="clip" :src="imgUrl + 'clip2.png'"></image>
                                <text>{{ item.score }}</text>
                                <view>| 总接单{{ item.orderNumber }}</view>
                            </view>
                            <view class="production centers mt-20" :data-item="item" @tap.stop.prevent="toHairstylistproduction">
                                <text>查看作品{{ item.worksSum ? item.worksSum : 0 }}个</text>
                                <image class="icon-28" :src="imgUrl + 'right2.png'"></image>
                            </view>
                            <view class="ze mt-20 centers" v-if="item.zecouponDTOs[0]">
                                <image class="icon-28" :src="imgUrl + 'ze.png'"></image>
                                <text>{{ item.zecouponDTOs[0].deduction }}折起</text>
                            </view>
                            <view class="ze mt-20 centers" v-if="item.jiancouponDTOs[0] && !item.zecouponDTOs[0]">
                                <image class="icon-28" :src="imgUrl + 'jian.png'"></image>
                                <text>满{{ item.jiancouponDTOs[0].amount }}减{{ item.jiancouponDTOs[0].deduction }}</text>
                            </view>
                        </view>
                    </view>

                    <view class="lastright">
                        <view class="centers">
                            <text>{{ item.money != '暂无服务' ? '¥' + item.money : item.money }}</text>
                            <text class="qi" v-if="item.money != '暂无服务'">起</text>
                        </view>
                        <view class="map centers">
                            <text v-if="item.distance < 1000">{{ item.distance ? item.distance : 0 }}m</text>
                            <text v-if="item.distance >= 1000">{{ item.newdistance }}km</text>
                            <van-icon name="location-o" />
                        </view>
                        <view class="deletesite" :data-id="item.stylistId" @tap.stop.prevent="onDeletesite" data-type="1">取消收藏</view>
                    </view>
                </view>
                <view class="details-box" v-if="hairlist.length == 0 || !hairlist">
                    <image class="details-page" :src="imgUrl + 'hair-defaultpage.png'"></image>
                    <view class="details-text">暂无美发师收藏</view>
                </view>
            </van-tab>
            <van-tab title="作品">
                <view class="exhibitionbox">
                    <view class="exhibition mt-30" @tap="onDetailex" :data-item="item" v-for="(item, index) in dynamiclist" :key="index">
                        <view>
                            <image class="exhibitionimg1" mode="aspectFill" :src="item.cover"></image>
                        </view>

                        <view>
                            <text>#{{ item.describe }}</text>
                        </view>

                        <view></view>

                        <view class="mt-10">
                            <view>
                                <image class="exhibitionimg2" mode="aspectFill" :src="item.headportrait"></image>
                                <text>{{ item.nickname }}</text>
                            </view>
                            <view class="centers" :data-id="item.opusId" data-type="2" @tap.stop.prevent="onDeletesite">
                                <image class="loveicon" :src="imgUrl + 'love.png'"></image>
                                <text>{{ item.collection }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="details-box" v-if="dynamiclist.length == 0 || !dynamiclist">
                    <image class="details-page" :src="imgUrl + 'works-defaultpage.png'"></image>
                    <view class="details-text">暂无作品收藏</view>
                </view>
            </van-tab>
        </van-tabs>
    </view>
</template>

<script>
// pages/myfavorite/index.js
const app = getApp(); // 引入app

import _request from '../../utils/request.js';
export default {
    data() {
        return {
            active: 0,
            marginBottom: app.globalData.marginBottom,
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            shoppage: 1,
            shoplist: [],
            hairpage: 1,
            hairlist: [],
            dynamicpage: 1,
            dynamiclist: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getshop(this.shoppage, false);
        this.gethair(this.hairpage, false);
        this.getdynamic(this.dynamicpage, false);
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        // this.getshop(1, false)
        // this.gethair(1, false)
        // this.getdynamic(1, false)
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 查看地图
        seeMap(e) {
            const { latitude, longitude, location } = e.currentTarget.dataset.item;
            let lat = latitude;
            let lon = longitude;
            let bankName = location;
            uni.openLocation({
                latitude: lat,
                longitude: lon,
                name: bankName,
                scale: 18
            });
        },

        // 前往美发师作品
        toHairstylistproduction(e) {
            const { item } = e.currentTarget.dataset;
            item.active = 1;
            let obj = JSON.stringify(item);
            uni.navigateTo({
                url: '/pages/hairstylistdetails/index?hair=' + encodeURIComponent(obj)
            });
        },

        // 查看作品详情
        onDetailex(e) {
            const { item } = e.currentTarget.dataset; // let obj = JSON.stringify(item)

            uni.navigateTo({
                url: '/pages/workdetails/index?id=' + item.opusId
            });
        },

        // 前往门店详情
        toShopdetails(e) {
            const { item } = e.currentTarget.dataset;
            let obj = JSON.stringify(item);
            uni.navigateTo({
                url: '/pages/shopdetails/index?shop=' + obj
            });
        },

        // 前往美发师详情
        toHairstylistdetails(e) {
            const { item } = e.currentTarget.dataset;
            let obj = JSON.stringify(item);
            uni.navigateTo({
                url: '/pages/hairstylistdetails/index?hair=' + encodeURIComponent(obj)
            });
        },

        // 门店收藏
        getshop(e, show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .get('/collection/getStore', {
                    page: e,
                    size: 10,
                    status: 1,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    let list = res.data?.data || [];
                    list = list?.map((item) => {
                        let distance = (parseInt(item.distance) / 1000).toFixed(2) * 1000;
                        let newdistance = (Math.round(distance * 10) / 10000).toFixed(1);
                        return { ...item, newdistance };
                    });
                    this.setData({
                        shoplist: e > 1 ? [...this.shoplist, ...list] : list
                    });

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }

                    console.log(error, 'error');
                });
        },

        // 美发师收藏
        gethair(e, show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .get('/collection/getStylist', {
                    page: e,
                    size: 10,
                    status: 1,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    let list = [];

                    if (res.data.data != undefined) {
                        list = res.data.data?.map((item) => {
                            let distance = (parseInt(item.distance) / 1000).toFixed(2) * 1000;
                            let newdistance = (Math.round(distance * 10) / 10000).toFixed(1);
                            let money = item.lowestServicePrice ? item.lowestServicePrice.toFixed(2) : '暂无服务';

                            if (item.lable) {
                                let moneys = item.lable.match(/\d+(.\d+)?/g).join('');
                                let meal = item.lable.split(moneys)[0];
                                return { ...item, money, meal, newdistance };
                            } else {
                                return {
                                    money,
                                    ...item,
                                    newdistance
                                };
                            }
                        });
                    }

                    this.setData({
                        hairlist: e < 2 ? list : [...this.hairlist, ...list]
                    });

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }

                    console.log(error, 'error');
                });
        },

        // 动态收藏
        getdynamic(e, show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .get('/dynamicState/getCollectDynamicState', {
                    page: e,
                    size: 10,
                    status: 1,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    this.setData({
                        dynamiclist: e > 1 ? [...this.dynamiclist, ...res.data.data] : res.data.data
                    });

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }

                    console.log(error, 'error');
                });
        },

        // 点击取消收藏
        onDeletesite(e) {
            uni.showModal({
                title: '请确认是否要取消收藏',
                success: (res) => {
                    if (res.confirm) {
                        this.Deletesite(e);
                    } else if (res.cancel) {
                    }
                }
            });
        },

        // 取消收藏
        Deletesite(e) {
            let _this = this;

            const { id, type } = e.currentTarget.dataset;

            if (type == 0) {
                _request
                    .postObj('/storeManage/updateCollectionType', {
                        isCollection: 1,
                        storeId: id,
                        userId: uni.getStorageSync('userid')
                    })
                    .then((res) => {
                        uni.showToast({
                            title: '取消收藏成功',
                            icon: 'none',
                            duration: 2000
                        });
                        setTimeout(() => {
                            _this.getshop(1, false);
                        }, 500);
                    })
                    .catch((error) => {
                        console.log(error, 'error');
                    });
            } else if (type == 1) {
                _request
                    .postObj('/store/storeCollection', {
                        stylistId: id,
                        type: 0,
                        userId: uni.getStorageSync('userid')
                    })
                    .then((res) => {
                        uni.showToast({
                            title: '取消收藏成功',
                            icon: 'none',
                            duration: 2000
                        });
                        setTimeout(() => {
                            _this.gethair(1, false);
                        }, 500);
                    })
                    .catch((error) => {
                        console.log(error, 'error');
                    });
            } else if (type == 2) {
                _request
                    .postObj('/storeStylist/oupsCollection', {
                        opusId: id,
                        type: 0,
                        userId: uni.getStorageSync('userid')
                    })
                    .then((res) => {
                        uni.showToast({
                            title: '取消收藏成功',
                            icon: 'none',
                            duration: 2000
                        });
                        setTimeout(() => {
                            this.getdynamic(1, false);
                        }, 500);
                    })
                    .catch((error) => {
                        console.log(error, 'error');
                    });
            }
        },

        onChange() {
            console.log('占位：函数 onChange 未声明');
        }
    }
};
</script>
<style>
/* pages/myfavorite/index.wxss */
/* 搜索 */
.search {
    width: 710rpx;
    height: 60rpx;
    background: #f2f2f2;
    border-radius: 22px;
    display: flex;
    margin: 20rpx;
}

.seaicon {
    margin: 0 20rpx 0 40rpx;
}

.weui-input {
    width: 600rpx;
    height: 60rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    line-height: 60rpx;
}

/* 门店 */

.shopbox {
    width: 710rpx;
    height: 240rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin: 20rpx 20rpx 0 20rpx;
}

.shopleft {
    height: 100%;
    width: 454rpx;
    display: flex;
    flex-wrap: nowrap;
    margin-right: 56rpx;
}

.shopleft > view:nth-child(1) {
    margin: 20rpx 30rpx 20rpx 20rpx;
}

.shopleft > view:nth-child(2) {
    margin: 20rpx 0 20rpx 0;
}

.shopleft view:nth-child(1) view:nth-child(2) {
    margin: 20rpx 30rpx 20rpx 20rpx;
}

.shopright {
    height: 100%;
    width: 130rpx;
    margin-right: 20rpx;
    position: relative;
}

.shopright > view:nth-child(1) {
    height: 32rpx;
    margin: 20rpx 0 0 0;
    float: right;
}

.shopleft .names {
    width: 256rpx;
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.shopimg {
    width: 200rpx;
    height: 200rpx;
    border-radius: 4rpx;
}

.site {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.shopleft > view:nth-child(2) > view:nth-child(3) > text:nth-child(1) {
    font-size: 22rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 34rpx;
}

.shopleft > view:nth-child(2) > view:nth-child(3) > text:nth-child(2) {
    font-size: 22rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #999;
    line-height: 34rpx;
}

.clip {
    width: 24rpx;
    height: 22rpx;
}

.map > text {
    /* width: 166rpx; */
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #999999;
    line-height: 34rpx;
    margin-right: 10rpx;
}

/* 美发师 */
.hairstylist {
    width: 710rpx;
    height: 260rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    position: relative;
    box-sizing: border-box;
    padding: 30rpx 20rpx;
    top: 0;
    margin: 20rpx 20rpx 0 20rpx;
}

.lastleft {
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    margin-right: 56rpx;
}

.lastbox .lastleft > view:nth-child(1) {
    margin: 20rpx 30rpx 0rpx 0rpx;
}

.lastbox .lastleft > view:nth-child(2) {
    margin: 20rpx 0 20rpx 0;
}

.score > text {
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 34rpx;
    margin: 0 10rpx 0 6rpx;
}

.score > view {
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 34rpx;
}

.fl-r {
    float: right;
}

.hairstylist .lastleft > view:nth-child(1) {
    margin: 0rpx 30rpx 0rpx 0rpx;
}

.hairstylist .lastleft > view:nth-child(2) {
    margin: 0rpx 0 20rpx 0;
}

.deletesite {
    width: 140rpx;
    height: 48rpx;
    background: #e9e9e9;
    box-shadow: 0px 2px 4px 0px rgba(223, 223, 223, 0.26);
    border-radius: 12px;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 48rpx;
    text-align: center;
    position: absolute;
    bottom: 20rpx;
    right: 0;
}

.hairstylist .lastright > view:nth-child(1) {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff1b0b;
    line-height: 44rpx;
    /* margin-top: 10rpx; */
    text-align: left;
}

.hairstylist .lastright > view:nth-child(2) {
    height: 28rpx;
    font-size: 20rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #999999;
    line-height: 28rpx;
    text-align: right;
    float: right;
    margin-top: 20rpx;
}

.qi {
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    margin-left: 10rpx;
}

.production > text {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

.ze {
    position: absolute;
}

.ze > text {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    line-height: 34rpx;
    margin-left: 10rpx;
}

.map > text {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #999999;
    line-height: 34rpx;
    margin-right: 10rpx;
}

.job1,
.job2 {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    width: 264rpx;
    height: 34rpx;
    line-height: 34rpx;
}

.job3 {
    padding: 0 10rpx;
    height: 32rpx;
    line-height: 32rpx;
    background: #ff8722;
    border-radius: 0px 4px 4px 4px;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    margin-left: 10rpx;
    text-align: center;
    white-space: nowrap;
}

.names > text:nth-child(1) {
    max-width: 256rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.headerimg {
    width: 160rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
}

.close {
    width: 32rpx;
    height: 32rpx;
}

.swiperimg {
    width: 100%;
}

.lastright {
    height: 100%;
    width: min-content;
    position: relative;
    min-width: 130rpx;
}

/* 动态 */
.exhibitionbox {
    display: flex;
    flex-wrap: wrap;
    margin: 0 40rpx;
    justify-content: space-between;
}

.exhibition {
    width: 320rpx;
    height: 490rpx;
    background-color: white;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
}

.exhibition > view:nth-child(2) {
    height: 68rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-bottom: 10rpx;
    margin-left: 10rpx;
}

.exhibition > view:nth-child(4),
.exhibition > view:nth-child(4) > view:nth-child(1) {
    height: 60rpx;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    line-height: 60rpx;
    text-align: center;
}

.exhibition > view:nth-child(4) {
    justify-content: space-between;
    margin-right: 10rpx;
    margin-left: 10rpx;
}

.exhibition > view:nth-child(4) > view:nth-child(1) > text {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
    margin-left: 20rpx;
    max-width: 150rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.exhibition > view:nth-child(4) > view:nth-child(2) > text {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
    margin-left: 10rpx;
}

.exhibitionimg1 {
    height: 320rpx;
    width: 320rpx;
}

.exhibitionimg2 {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
}

.loveicon {
    width: 28rpx;
    height: 28rpx;
}

/* vant组件样式 */
.van-tab--active {
    font-size: 32rpx !important;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
}

.van-tabs__line {
    background: #ff8722 !important;
}

.van-tabs__nav,
.custom-class,
.van-tabs__scroll--line {
    background: #fbfbfb !important;
}

.nav-class {
    margin: 0 100rpx;
}

.lastright > view:nth-child(1) text {
    font-size: 30rpx;
}
</style>
